<!-- SKU
  1、点击不同类型标签 显示不同价格
  2、判断是否有库存（未完成）
  3、自动聚焦最小SKU(价格最小)（未完成）
  -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
  <script src="./vue.js"></script>
  <title>商品价格库存</title>
</head>

<body>
  <div id="app">
    <!-- 显示可选项 -->
    <div v-for="(item, index) in res.json1" :key="index" class="li">
      {{index}}: 
      <template
        v-for="(item2, index2) in item" 
        
        >
        <span v-if='inventory[index] && inventory[index][item2] == false' class="item unclick"> {{item2}}</span>
        <span v-else
          :class="{item:true, 
            beclick: beSelect[index] == item2, 
           }"
          @click='select(index,item2)' >
          {{item2}}
        </span>

      </template>
      
    </div>
    <p>当前筛选条件：
      <span v-for="(item, index) in beSelect" :key="index">{{index}}: "{{item}}"，</span>
    </p>
    <p>匹配对象：
      <span v-for="(item, index) in matchObject" :key="index">{{index}}: "{{item}}"，</span>
    </p>
    <p>价格：{{matchObject.price}}
    </p>
  </div>

  <script>
    var app = new Vue({
      el: '#app',
      data: {
        // 后台返回数据格式
        res: {
          json1: {
            color: ["红色", "黄色", "蓝色"],
            type: ["S", "M"],
            mianliao: ["棉的", "涤纶"],
          },
          json2: [{
              color: "红色",
              type: "S",
              mianliao: "棉的",
              price: 100,
              inventory:1
            },
            {
              color: "红色",
              type: "M",
              mianliao: "棉的",
              price: 200,
              inventory:0
            },
            {
              color: "红色",
              type: "S",
              mianliao: "涤纶",
              price: 300,
              inventory:0
            },
            {
              color: "红色",
              type: "M",
              mianliao: "涤纶",
              price: 400,
              inventory:1
            },
            {
              color: "黄色",
              type: "S",
              mianliao: "棉的",
              price: 500,
              inventory:1
            },
            {
              color: "黄色",
              type: "M",
              mianliao: "棉的",
              price: 600,
              inventory:1
            },
            {
              color: "黄色",
              type: "S",
              mianliao: "涤纶",
              price: 700,
              inventory:1
            },
            {
              color: "黄色",
              type: "M",
              mianliao: "涤纶",
              price: 800,
              inventory:1
            },
            {
              color: "蓝色",
              type: "S",
              mianliao: "棉的",
              price: 900,
              inventory:1
            },
            {
              color: "蓝色",
              type: "M",
              mianliao: "棉的",
              price: 1000,
              inventory:1
            },
            {
              color: "蓝色",
              type: "S",
              mianliao: "涤纶",
              price: 1100,
              inventory:1
            },
            {
              color: "蓝色",
              type: "M",
              mianliao: "涤纶",
              price: 1200,
              inventory:1
            },
          ]
        },
        // 被选元素
        beSelect: {},
        // 匹配对象
        matchObjects:[], //匹配到多个对象
        matchObject: {},
        //库存
        inventory:{}
      },
      created() {
        
      },
      mounted() {
        // 初始化被选元素
        for (const key in this.res.json1) {
          // this.beSelect[key] = this.res.json1[key][0]
          this.beSelect[key] = ''
        }
        this.initiInventory()
        console.log(this.beSelect)
        console.log(this.inventory)
        // this.beSelect[]
        // 初始化匹配元素
        let matchObject = this.filterObject()
        this.matchObject = matchObject[0]

        
      },
      methods: {
        // 初始化库存
        initiInventory(){
          // 初始化被选元素
          console.log("初始化inventory")
          for (const key in this.res.json1) {
            this.inventory[key] = {}
            for (let i = 0; i < this.res.json1[key].length; i++) {
              let subkey = this.res.json1[key][i]
              this.inventory[key][subkey] = true; //默认有库存，可选择
              
            }
          }
        },
        // type:点击类型，value:选中值
        select(type,value){
          
        this.initiInventory()
          if(this.beSelect[type] == value){   
            // 取消选择
            this.beSelect[type] = ''
          }else{
            // 选择
            this.beSelect[type] = value
          }
          // 获取价格
          this.matchObjects = this.filterObject()
          if(this.matchObjects.length!=1){
            this.matchObject = {} 
          }else{
            this.matchObject = this.matchObjects[0] // 只匹配到一个对象，显示价格
          }
          this.resetInventory(this.matchObjects)
        },
        // 筛选匹配对象
        filterObject(){
          let matchObject = this.res.json2.filter((item)=>{
            // console.log(item)
            let tag = true
            Object.keys(this.res.json1).forEach(key => {
              if(this.beSelect[key] && this.beSelect[key] != item[key]){
                tag = false
              }
            });
            return tag ? item : null
          })
          return matchObject
        },
        /**
         * 判断是否还有库存
         * 根据选择项，获取匹配对象(即调用filterObject方法)
         * 根据匹配对象inventory字段值修改this.inventory
         * 不完善！
         */
        resetInventory(matchObjects){
          let json1 = this.res.json1
          // let json2 = this.res.json2
          console.log('匹配对象')
          console.log(matchObjects)
          Object.keys(json1).forEach(key=>{
            if(this.beSelect[key] == ''){
              // 匹配得对象中，除了已经点击选择过的属性，其他值
              // 值 在匹配对象中 保护改值的对象 有一个的 库存 不为零 ，就能够被选择
              // 改值 在匹配的所有对像 对应属性值 都为零 则不能被选择
              for (let i = 0; i < json1[key].length; i++) {
                const value = this.res.json1[key][i];
                let tag = matchObjects.some(function(item, index){
                  console.log(item[key],item.inventory)
                  return item[key] == value && item.inventory !=0
                })
                this.inventory[key][value] = tag 
                console.log('结果',value,tag)
              }
              console.log(this.inventory)
              // console.log(item[key])
              // this.inventory[key][item[key]] = false
              // console.log(this.inventory)
            }
          })
        }
      }

    })
  </script>
  <style>
    .li{
      margin: 10px 0;
    }
    .item{
      border:1px solid black;
      color: black;
      padding:  0 10px;
      margin: 0 10px;
      cursor: pointer;
    }
    .unclick{
      border:1px solid #999;
      color: #999;
      cursor: not-allowed;
    }
    .beclick{
      border:1px solid red;
      color: red;
    }
  </style>
</body>

</html>